7.5 Modal Windows

Motivations
- Try 'SignIn' in TRU Questions & Answers.
What are modal windows?
- Read the first part in Modal window.
- Do you have any idear how to write the code for 'SignIn' in TruQA?
  - How to display a box over every other elements?
  - How to make the background, i.e., everything except the pop-up box, dim?
  - When the background is clicked, how to make the pop-up box disappear?
- Trial 1: Let's try to make a pop-up box over everything. Hints. position, calc(), z-index
  <style> #tr1-popup { display: ???; /* initially not displayed */ border: 1px solid black; background-color: LightBlue; width: 400px; height: 200px; ???: ???; /* what kind of positioning? */ top: 200px; left: ????; /* at the horizontal center */ ???: 10; /* over other elements */ } </style> <div id='tr1-popup'> <h1 style='text-align: center'>Sign In</h1> </div> <button id='tr1-signin'>SignIn</button> <script> document.getElementById('tr1-signin').addEventListener('click', function() { document.getElementById('tr1-popup').???.??? = ???; }); </script>
- Trial 2: Let's try to make a pop-up box disappear when the close button in the pop-up box is clicked.
  <style> #tr2-popup { display: none; border: 1px solid black; background-color: LightBlue; width: 400px; height: 200px; position: fixed; top: 200px; left: calc((100vw - 400px) / 2); /* horizontal center */ z-index: 11; /* over other elements */ } </style> <div id='tr2-popup'> <h1 style='text-align: center'>Sign In</h1> <button id='tr2-close'>Close</button> </div> <button id='tr2-signin'>SignIn</button> <script> document.getElementById('tr2-signin').addEventListener('click', function() { document.getElementById('tr2-popup').???? = 'block'; }); document.getElementById('tr2-close').addEventListener(???, function() { document.getElementById('tr2-popup').???? = ???; }); </script>
- Trial 3: Let's try to make the other area dim. How? Any good idea? Hints. blanket over the area, and obacity.
  <style> #tr3-popup { border: 1px solid black; background-color: LightBlue; width: 400px; height: 200px; position: fixed; top: 200px; left: calc((100vw - 400px) / 2); /* horizontal center */ z-index: 12; /* over other elements */ display: none; } #tr3-blanket { position: ???; top:0; left:0; width: ???; height: ???; background-color: LightGrey; ???: 0.5; ???: ???; display: ???; /* initiall not displayed */ } </style> <div id='tr3-popup'> <h1 style='text-align: center'>Sign In</h1> <button id='tr3-close'>Close</button> </div> <div id='tr3-blanket'></div> <button id='tr3-signin'>SignIn</button> <script> document.getElementById('tr3-signin').addEventListener('click', function() { document.getElementById(???).style.display = 'block'; document.getElementById(???).style.display = 'block'; }); document.getElementById('tr3-close').addEventListener('click', function() { document.getElementById(???).???? = ???; document.getElementById(???).???? = ???; }); </script>
- Can you try to click all the blanket area? What happens?
- Trial 4: Let's try to make the the pop-up box disappear, even when the blanket area is clicked. How? Any good idea?
  <style> #tr4-popup { border: 1px solid black; background-color: LightBlue; width: 400px; height: 200px; position: fixed; top: 200px; left: calc((100vw - 400px) / 2); /* horizontal center */ z-index: 12; /* over other elements */ display: none; } #tr4-blanket { position: fixed; top: 0; left: 0; width:100%; height:100%; background-color: LightGrey; opacity: 0.5; z-index: 11; display: none; } </style> <div id='tr4-popup'> <h1 style='text-align: center'>Sign In</h1> <button id='tr4-close'>Close</button> </div> <div id='tr4-blanket'></div> <button id='tr4-signin'>SignIn</button> <script> document.getElementById('tr4-signin').addEventListener('click', function() { document.getElementById('tr4-popup').style.display = 'block'; document.getElementById('tr4-blanket').style.display = 'block'; }); document.getElementById('tr4-close').addEventListener('click', function() { ???? }); document.getElementById(???).addEventListener('click', function() { ???? }); </script>
- Can you use a drop down menu instead of the button on the above examples?

Learning outcomes